            <link rel="stylesheet" href="/static/Admin/css/bootstrap-select.min.css">
            <script src="/static/Admin/webjs/bootstrap-select.min.js"></script>
            <div id="openmain">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="ntModalLabel" type="{$request}">{:strtoupper($title)}</h4>
            </div>
            <div class="modal-body">
                <input type="hidden" id="ispublic" value="{if isset($item)}{$item.is_public}{/if}">
                <input type="hidden" id="id" value="{if isset($id)}{$id}{/if}">
                <div class="row clearfix">
                    <div class="col-md-12 column">
                        <div class="alert alert-dismissable alert-info">
                            <button type="button" class="close">×</button>
                             <p></p>
                        </div>
                    </div>
                </div>

               <div class="row clearfix" style="padding-top:12px">
                    <div class="col-md-12 column">
                        <ul class="nav nav-tabs">
                            <li :class="{'active':index==0}" :lang="langitem.code" v-for="(langitem,index) in langs">
                                <a :href="'#'+langitem.code" data-toggle="tab">{{langitem.name}}</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="tab-content">
                    <div :id="langitem.code" :class="{'tab-pane':true, 'active':index==0}" v-for="(langitem,index) in langs">
                            <table class="table table-hover ntTable">
                                <colgroup>
                                    <col width="20%">
                                    <col width="80%">
                                </colgroup>
                                <tbody>
                                       <tr>
                                        <td >{:strtoupper(lang('name'))}<span class="required"></span></td>
                                        <td>
                                            <input type="text" class="form-control itemcat_name" placeholder="产品配件类型名称" v-model="data.itemcat_name[langitem.code]">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>{:strtoupper(lang("quantity"))}<span class="required"></span></td>
                                        <td>
                                            <input type="number" class="form-control text-right itemcat_qty" placeholder="{:strtoupper(lang('quantity_of_accessories_per_product'))}" v-model="data.qty">
                                        </td>
                                    </tr>
                                       <tr>
                                        <td>{:strtoupper(lang('universal'))}</td>
                                        <td>
                                            <label class="checkbox-inline">
                                                <input type="checkbox"  class="is_public" v-model="data.is_public" @change="changecheck"> {:strtoupper(lang("whether_to_designate_a_general_product_as_na_accessory"))}
                                            </label>
                                        </td>
                                    </tr>
                                    
                                    <tr class="select-pro2item" v-show="data.is_public">
                                        <td>{:strtoupper(lang('product_category'))}<span class="required"></span></td>
                                        <td>
                                            <div class="input-group" style="width:100%">
                                                <div class="input-group">
                                                    <select class="selectpicker" @change="changeproclass" v-model="proclassval">
                                                        <option value="0">{:strtoupper(lang("please_select_a_product_category"))}</option>
                                                        <option :value="classitem.id" v-for="(classitem,index) in proclass" :style="{'padding-left': 20+20*classitem.level+'px'}">{{classitem['name_'+langitem.code]}}</option>
                                                    </select>
                                                </div>
                                                
                                            </div>
                                        </td>
                                    </tr>
                                    <tr class="select-pro2item" v-show="data.is_public">
                                        <td>{:strtoupper(lang("product_accessory_name"))}<span class="required"></span></td>
                                        <td>
                                            <div class="input-group" style="width:100%">
                                                <div class="input-group">
                                                    <div class="input-group-btn">
                                                    <select class="form-control"  style="width: 150px;" v-model="data.pro_id" @change="changeproname">
                                                        <option value="0">请选择产品名称</option>
                                                        <option :value="proitem.id" v-for="(proitem,index) in proname">{{proitem['name_'+langitem.code]}}</option>
                                                        </select>
                                                    </div>
                                                    <input type="text" class="form-control searchText" placeholder="{:strtoupper(lang('enter_product_name_/_number'))}" v-model="searchText">
                                                    <div class="input-group-btn">
                                                        <button type="button" class="btn btn-primary" @click="searchfun">
                                                            <span class="glyphicon glyphicon-search" > </span> {:strtoupper(lang('search'))}
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr class="select-pro2item" v-show="data.is_public">
                                        <td>{:strtoupper(lang("the_role_of_accessory"))}<span class="required"></span></td>
                                        <td>
                                            <select class="form-control" v-model="data.prochar_id">
                                                <option value="0">请选择产品角色</option>
                                                <option :value="proroleitem.id" v-for="(proroleitem,index) in prorole" >{{proroleitem['content_'+langitem.code]}}</option>
                                            </select>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                    </div>
                </div>
            </div>
            <input type="hidden" id="request" value="{$request}">
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>{:strtoupper(lang('cancel'))}</button>
                <button type="button" class="btn btn-primary" style="padding-left:24px;padding-right:24px" @click="savefun"><span class="glyphicon glyphicon-floppy-disk"></span>{:strtoupper(lang('save'))}</button>
            </div>
        </div>
    <script type="text/javascript">
        new Vue({
            el:'#openmain',
            data:()=>({
                langs:[],
                proclass:[],//产品分类
                proclassval:'0',
                proname:[],//产品名称
                prorole:[],//产品角色
                searchText:'',//搜索的内容
                data:{
                    qty:0,
                    pro_id:0,
                    prochar_id:0,
                    is_public:false,
                    id:0,
                    itemcat_name:{},
                    id:$('#id').val()
                }
            }),
            mounted(){
                $.ajax({
                    url:'/admin/api/getLangType',
                    type:'post',
                    success:data=>{
                        this.langs = JSON.parse(data)
                        this.langs.forEach(item => {
                            this.data.itemcat_name[item.code]=''
                        });
                    }
                })
                if($('#ntModalLabel').attr('type')=='edit'){
                    $.ajax({
                    url:'/admin/proitem/editopen?id='+this.data.id+'&request=requestAjax',
                    type:'post',
                    success:data=>{
                        data = JSON.parse(data)
                        this.proclass=data.data.procat
                        if(data.data.item.is_public==1){
                            this.proname.push(data.data.itempro)
                            this.prorole.push(data.data.itemprochar)
                        }
                        this.data.qty=data.data.item.qty
                        this.data.is_public=data.data.item.is_public==1
                        this.data.pro_id=data.data.item.pro_id ? data.data.item.pro_id : 0
                        this.data.prochar_id=data.data.item.prochar_id ? data.data.item.prochar_id : 0
                        for (const key in this.data.itemcat_name) {
                            this.data.itemcat_name[key]=data.data.item['name_'+key]
                        }
                        var time=setInterval(()=>{
                            if($('.selectpicker').length){
                                $('.selectpicker').selectpicker({});
                                $(".selectpicker").selectpicker('refresh');
                                clearInterval(time)
                            }                            
                        },100)
                        console.log(data)
                    }
                })
                }
            },
            methods:{
                changecheck(){
                    if(this.data.is_public && this.proclass.length==0){
                        $.ajax({
                            url:"/admin/proitem/getProcat",
                            type:"post",
                            success:data=>{
                                data=JSON.parse(data)
                                this.proclass=data
                                $('.selectpicker').selectpicker({});
                            }
                        })
                    }
                },
                changeproclass(e){
                    this.$nextTick(()=>{
                        $('.selectpicker').selectpicker({});
                        $(".selectpicker").selectpicker('refresh');
                    })
                    if($('#ntModalLabel').attr('type') == 'add'){
                        var url ='/admin/proitem/addopen';
                    }else{
                        var url ='/admin/proitem/editopen';
                    }
                    $.ajax({
                        url:url,
                        type: 'post',
                        data: {cat_id:e.target.value,lang:'zh',request:'pro'},
                        dataType: 'json',
                        success:  (res)=>{
                            res = JSON.parse(res)
                            this.proname=res.data
                        }
                    })
                },
                changeproname(){
                    if($('#ntModalLabel').attr('type') == 'add'){
                        var url ='/admin/proitem/addopen';
                    }else{
                        var url ='/admin/proitem/editopen';
                    }
                    $.ajax({
                        url:url,
                        type: 'post',
                        data: {id:this.data.pro_id,lang:'zh',request:'prochar'},
                        dataType: 'json',
                        success: (res)=>{
                            res = JSON.parse(res)
                            this.prorole=res.data
                            this.proroleval=0
                        }
                    })
                },
                searchfun(){
                    if($('#ntModalLabel').attr('type') == 'add'){
                        var url ='/admin/proitem/addopen';
                    }else{
                        var url ='/admin/proitem/editopen';
                    }
                    $.ajax({
                        url:url,
                        type: 'post',
                        data: {cat_id:this.proclassval,searchText:this.searchText,lang:'zh',request:'searchText'},
                        dataType: 'json',
                        success: (res) =>{
                            res = JSON.parse(res)
                            console.log(res)
                            this.proname=res.data
                        }
                    })
                },
                savefun(){
                    if($('#ntModalLabel').attr('type') == 'add'){
                        var url ='/admin/proitem/addopen?request=insert';
                    }else{
                        var url ='/admin/proitem/editopen?request=update';
                    }
                    $.ajax({
                        url: url,
                        type: 'post',
                        data:this.data,
                        success:(data)=>{
                            data = JSON.parse(data)
                            if(data.status==1){
                                change_mes_type('.alert',data.status)
                                //toastr.info(data.msg)
                                $('.alert').show()
                                $('.alert p').html('*'+data.msg+'<br>')
                                $('#itemtype_editModal').modal('hide')
                            }else{
                                change_mes_type('.modal-body .alert',data.status)
                                $('.modal-body .alert').show()
                                $('.modal-body .alert p').html('*'+data.msg+'<br>')
                                state=true
                            }
                        }
                    })
                }
            }
        })

    </script>